<template>
	<view class="timbre-box left clearfix">
		<view class="tim-yinse-item left clearfix">
			<view class="tim-image-left left clearfix">
				<image :src="currentTimbre.avatar" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;"></image>
			</view>
			<view class="tim-text-box left clearfix">
				<text class="ellipsis">{{currentTimbre.name}}</text>
				<text class="ellipsis">{{currentTimbre.scene}}|{{currentTimbre.title}}</text>
			</view>
			<view class="tim-right right clearfix" @click="alertTimbre()">
				<uni-icons type="icon-qiehuanx" color="#666" custom-prefix="iconfont" size="20"></uni-icons>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="timbre-alert-box left clearfix">
				<view class="timbre-title-box left clearfix">
					<view class="timbre-title-text left">
						选择配音
					</view>
					<view class="timbre-title-close right" @click="closePopup()">
						<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
					</view>
				</view>
				
				<view class="timbre-content-box left clearfix">
					
					<view :style="currentSelectTimbre._id == item._id?'border:1px solid #8cde9b;':'border:1px solid #eee;'" class="tim-right-item left clearfix relative" v-for="(item,index) in timbre" @click="setSelectTimbre(item,index)">
						<view class="tim-right-image left clearfix relative">
							<image :src="item.avatar" style="width:100%;height:100%;border-radius: 50%;"></image>
							<view class="tim-right-play absolute">
								<uni-icons v-if="currentPlayAudioIndex!=index || currentPlayAudioStatus=='pause' || currentPlayAudioIndex===null" type="icon-bofang2" size="18" @click="setPlay(item,'play',index)" color="#fff" custom-prefix="iconfont"></uni-icons>
								<uni-icons v-if="currentPlayAudioIndex==index && currentPlayAudioStatus=='play'" type="icon-weibiaoti519" size="18" @click="setPlay(item,'pause',index)" color="#fff" custom-prefix="iconfont"></uni-icons>
							</view>
						</view>
						<view class="tim-right-text left ellipsis">
							<text>{{item.name}}——{{item.title}}</text>
							<text>适用场景：{{item.scene}}</text>
						</view>
						<view class="tim-dui-box left absolute" v-if="currentSelectTimbre._id == item._id">
							
						</view>
					</view>
					
					
				</view>
				
				<view class="tim-button left clearfix">
					<view class="tim-submit left" @click="submitTimbre()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style scoped>
	.tim-right-text text:last-child{font-size:13px;color:#999;}
	.tim-right-text text:first-child{font-weight:500;}
	.tim-right-text text{float:left;width:100%;line-height:25px;height:25px;text-align: left;}
	.tim-dui-box{width:25px;height:25px;right:0;bottom:0;background:url('/static/images/sanjiaoxing.png') no-repeat center 3px;background-size:cover;text-align: right;}
	.tim-right-item:hover{border:1px solid #8cde9b;background-color:#d1f2d7;}
	.tim-submit{width:50%;height:40px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);line-height:40px;text-align: center;color:#fff;font-size:14px;margin-left:25%;border-radius: 20px;cursor:pointer;}
	.tim-button{width:100%;height:50px;line-height:50px;margin-top:20px;}
	.tim-right-play{width:25px;line-height:25px;text-align:center;height:25px;background:rgba(100,100,100, .3);left:12.5px;top:12.5px;border-radius: 50%;z-index:100; }
	.tim-right-text{width:calc(100% - 80px);line-height:50px;height:50px;text-align: center;color:#666;font-size:13px;margin-top:17.5px;}
	.tim-right-image{width:50px;height:50px;margin:12.5px;border:1px solid #eee;border-radius: 50%;margin-top:17.5px;margin-bottom:10px;margin-right:5px;}
	.tim-right-item{width:31%;height:85px;background:#fff;border-radius: 5px;margin:10px;cursor:pointer;border:1px solid #eee;margin-left:9px;margin-right:5px;}
	.timbre-content-box{width:calc(100% - 40px);margin-left:20px;height:400px;margin-top:10px;overflow: auto;}
	.timbre-title-close{width:30px;height:50px;line-height:50px;margin-right:5px;cursor:pointer;}
	.timbre-title-text{line-height:50px;margin-left:20px;font-size:14px;}
	.timbre-title-box{width:100%;height:50px;}
	.timbre-alert-box{width:900px;height:550px;background:#fff;border-radius: 20px;}
	.tim-right{width:30px;height:60px;margin-top:10px;line-height:60px;margin-right:10px;cursor:pointer;}
	.tim-text-box text:last-child{color:#999;}
	.tim-text-box text:first-child{font-weight:400;}
	.tim-text-box text{width:100%;float:left;line-height:20px;font-size:12px;}
	.tim-text-box{width:60%;height:40px;margin-top:20px;}
	.tim-image-left{width:50px;height:50px;border:1px solid #eee;margin:15px;border-radius: 50%;margin-right:10px;}
	.tim-yinse-item{width:100%;height:80px;background-color: #fff;border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 4px 1px;}
	.timbre-box{width:100%;height:80px;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		name:"timbre",
		data() {
			return {
				currentTimbre:{},//当前使用的音色
				timbre:[],
				innerAudioContext:null,//音频播放数据
				audioItem:{},//正在播放的数据
				currentPlayAudioIndex:null,//当前正在播放的index
				currentPlayAudioStatus:null,//当前播放状态
				currentSelectTimbre:{}
			};
		},
		created() {
			var that = this;
			var time = new Date().getTime();
			//获取缓存音色
			uni.getStorage({
				key:'baidu-timbre',
				success:function(res){
					var data = res.data;
					if(data && data.data && time < data.expire){
						that.timbre = data.data;
					}else{
						that.getTimbre();
					}
				},
				fail() {
					that.getTimbre();
				}
			})
			
			uni.getStorage({
				key:'baidu-current-timbre',
				success:function(res){
					if(res && res.data){
						that.currentTimbre = res.data;
						that.currentSelectTimbre = res.data;
					}else{
						setTimeout(function(){
							that.currentTimbre = that.timbre[0];
							that.currentSelectTimbre = that.timbre[0];
						},500);
						
					}
				},
				fail() {
					setTimeout(function(){
						that.currentTimbre = that.timbre[0];
					},500);
					
				}
			})
		},
		methods:{
			//关闭弹窗
			closePopup(){
				this.$refs.popup.close();
			},
			//点击确定以后
			submitTimbre(){
				this.currentTimbre = this.currentSelectTimbre;
				uni.setStorage({
					key:'baidu-current-timbre',
					data:this.currentSelectTimbre
				})
				this.$emit('confirm',this.currentSelectTimbre);
				this.closePopup();
			},
			//选中音色以后
			setSelectTimbre(item,index){
				this.currentSelectTimbre = item;
			},
			alertTimbre(){
				this.currentSelectTimbre = this.currentTimbre;
				this.$refs.popup.open();
			},
			//设置播放音频
			setPlay(item,act,index){
				var that = this;
				if(item.audio_url != this.audioItem.audio_url){
					if(that.innerAudioContext){
						that.innerAudioContext.stop();
					}
					var innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext = innerAudioContext;
					this.audioItem = item;
					innerAudioContext.src = item.audio_url;
					innerAudioContext.autoplay = true;
				}else{
					var innerAudioContext = this.innerAudioContext;
				}
				
				if(act == 'play'){
					innerAudioContext.play();
					innerAudioContext.onPlay(()=>{
						that.currentPlayAudioIndex = index;
						that.currentPlayAudioStatus = 'play';
					});
				}else if(act == 'pause'){
					innerAudioContext.pause();
					that.currentPlayAudioStatus = 'pause';
				}
				
				innerAudioContext.onEnded(()=>{
					that.currentPlayAudioStatus = 'pause';
				});
			},
			//查询出音色
			getTimbre(){
				db.collection('timbre').where({type:'baidu'}).orderBy('_id desc').get().then(res=>{
					var data = res.result.data;
					//把结果缓存1天
					this.setStorage(data);
					this.timbre = data;
				}).catch(err=>{
					console.log('err',err);
				});
			},
			//缓存数据
			setStorage(data){
				var time = new Date().getTime();
				uni.setStorage({
					key:'baidu-timbre',
					data:{
						expire:parseInt(time + 86400000),
						data:data
					}
				})
			}
		}
	}
</script>
